<template>
    <div class="bg-white dark:bg-zinc-800 p-4 rounded-lg shadow-md">
      <div class="grid grid-cols-4 gap-4 text-center">
        <div v-for="(item, index) in items" :key="index">
          <img :src="item.image" :alt="item.alt" class="mx-auto mb-2">
          <p :class="darkMode ? 'text-zinc-200' : 'text-zinc-800'">{{ item.title }}</p>
        </div>
      </div>
    </div>
</template>
  
  <script>
  export default {
    data() {
      return {
        items: [
          { image: 'https://placehold.co/50x50?text=1', alt: 'icon1', title: '我的资产' },
          { image: 'https://placehold.co/50x50?text=2', alt: 'icon2', title: '品味社区' },
          { image: 'https://placehold.co/50x50?text=3', alt: 'icon3', title: '企业采购' },
          { image: 'https://placehold.co/50x50?text=4', alt: 'icon4', title: '小米分期' },
          { image: 'https://placehold.co/50x50?text=5', alt: 'icon5', title: '官方客服' },
          { image: 'https://placehold.co/50x50?text=6', alt: 'icon6', title: '问卷调研' },
          { image: 'https://placehold.co/50x50?text=7', alt: 'icon7', title: '小米钱包' },
          { image: 'https://placehold.co/50x50?text=8', alt: 'icon8', title: '用户投诉' },
        ],
      };
    },
  };
</script>
<style>
@import "https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css";
</style>